<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div>
    <el-icon style="font-size: 21px; cursor: pointer" @click="showDialog"><Download /></el-icon>
    <el-dialog draggable v-model="dialogVisible" title="打包下载" width="40%">
      <stable height="350" :columns="tableSetting.columns" :data="tableSetting.data"></stable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import { saveAs } from "file-saver";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 弹框是否显示
const dialogVisible = ref(false);
// 当前下载数据
const rowObj = ref(null);
// 表格配置项
const tableSetting = reactive({
  columns: [
    { title: "创建时间", width: 160, field: "DC_CerateTime", sortable: true },
    { title: "文件名称", field: "DC_FileName", sortable: true },
    { title: "文件路径", field: "DC_FilePath", sortable: true },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }: { row: any; rowIndex: number }) => {
          return [
            <el-space>
              <el-link underline={false} type="primary" onClick={() => download(row)}>
                下载
              </el-link>
              <el-link underline={false} type="primary" onClick={() => deleteRow(row)}>
                移除
              </el-link>
            </el-space>
          ];
        }
      }
    }
  ],
  data: []
});
const showDialog = () => {
  dialogVisible.value = true;
  getData();
};
const getData = () => {
  proxy.$vueAxios.get("Master_Base_DownloadCentre/Get", { order: "DC_ID desc" }).then((res: any) => {
    tableSetting.data = res.List;
  });
};
// 下载
const download = async (row: any) => {
  if (row.DC_FilePath) {
    proxy.$showLoading({ tip: "下载请求中..." });
    const fileName = row.DC_FileName;
    const btey = 1024 * 1024 * 10; // 分片大小为10m
    const totalPieces = Math.ceil(row.DC_Size / btey);
    let arr: any[] = [];
    for (let i = 0; i < totalPieces; i++) {
      const data = await proxy.$vueAxios.download2(
        "InterfaceDownload/DownloadCentre",
        {
          id: row.DC_ID,
          piece: i + 1,
          pieceTotal: totalPieces
        },
        { noLoading: true }
      );
      const percent = Math.ceil(((i + 1) / totalPieces) * 100);
      proxy.$showLoading({ tip: `文件下载请求中...(${percent}%)` });
      arr = [...arr, data];
    }
    const fileBlob = new Blob(arr, { type: "application/octet-stream;charset=utf-8" });
    proxy.$hideLoading();
    saveAs(fileBlob, fileName);
  } else {
    proxy.$message.warning("下载路径缺失!");
  }
};
// 删除
const deleteRow = (row: any) => {
  proxy.$vueAxios.post("InterfaceDownload/DeleteDownloadCentre", [row.DC_ID]).then((res: any) => {
    if (res.Mark) {
      getData();
      proxy.$message.success("删除成功!");
    }
  });
};
</script>

<style scoped></style>
